<!--

    Copyright © 2016-2020 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<section [formGroup]="alarmScheduleForm" fxLayout="column">
  <mat-form-field class="mat-block" hideRequiredMarker floatLabel="always">
    <mat-label> </mat-label>
    <mat-select formControlName="type" required placeholder="{{ 'device-profile.schedule-type' | translate }}">
      <mat-option *ngFor="let alarmScheduleType of alarmScheduleTypes" [value]="alarmScheduleType">
        {{ alarmScheduleTypeTranslate.get(alarmScheduleType) | translate }}
      </mat-option>
    </mat-select>
    <mat-error *ngIf="alarmScheduleForm.get('type').hasError('required')">
      {{ 'device-profile.schedule-type-required' | translate }}
    </mat-error>
  </mat-form-field>
  <div *ngIf="alarmScheduleForm.get('type').value !== alarmScheduleType.ANY_TIME">
    <tb-timezone-select
      [defaultTimezone]="defaultTimezone"
      required
      formControlName="timezone">
    </tb-timezone-select>
    <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.SPECIFIC_TIME">
      <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
      <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px" style="padding-bottom: 16px;">
        <div fxLayout="row" fxLayoutGap="16px">
          <mat-checkbox [formControl]="weeklyRepeatControl(0)">
            {{ 'device-profile.schedule-day.monday' | translate }}
          </mat-checkbox>
          <mat-checkbox [formControl]="weeklyRepeatControl(1)">
            {{ 'device-profile.schedule-day.tuesday' | translate }}
          </mat-checkbox>
          <mat-checkbox [formControl]="weeklyRepeatControl(2)">
            {{ 'device-profile.schedule-day.wednesday' | translate }}
          </mat-checkbox>
          <mat-checkbox [formControl]="weeklyRepeatControl(3)">
            {{ 'device-profile.schedule-day.thursday' | translate }}
          </mat-checkbox>
        </div>
        <div fxLayout="row" fxLayoutGap="16px">
          <mat-checkbox [formControl]="weeklyRepeatControl(4)">
            {{ 'device-profile.schedule-day.friday' | translate }}
          </mat-checkbox>
          <mat-checkbox [formControl]="weeklyRepeatControl(5)">
            {{ 'device-profile.schedule-day.saturday' | translate }}
          </mat-checkbox>
          <mat-checkbox [formControl]="weeklyRepeatControl(6)">
            {{ 'device-profile.schedule-day.sunday' | translate }}
          </mat-checkbox>
        </div>
      </div>
      <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-time</div>
      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
        <mat-form-field fxFlex>
          <mat-label translate>device-profile.schedule-time-from</mat-label>
          <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
          <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
          <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
        </mat-form-field>
        <mat-form-field fxFlex>
          <mat-label translate>device-profile.schedule-time-to</mat-label>
          <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
          <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
          <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
        </mat-form-field>
      </div>
    </section>
    <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.CUSTOM">
      <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
      <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="16px" formArrayName="items">
        <div fxLayout="column" fxFlex fxFlex.gt-sm="50">
          <div fxLayout="row" fxLayoutGap="8px" formGroupName="0" fxLayoutAlign="start center">
            <mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 0)">
              {{ 'device-profile.schedule-day.monday' | translate }}
            </mat-checkbox>
            <div fxLayout="row" fxLayoutGap="8px" fxFlex>
              <mat-form-field fxFlex="100px">
                <mat-label translate>device-profile.schedule-time-from</mat-label>
                <mat-datetimepicker-toggle [for]="startTimePicker1" matPrefix></mat-datetimepicker-toggle>
                <mat-datetimepicker #startTimePicker1 type="time" openOnFocus="true"></mat-datetimepicker>
                <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker1">
              </mat-form-field>
              <mat-form-field fxFlex="100px">
                <mat-label translate>device-profile.schedule-time-to</mat-label>
                <mat-datetimepicker-toggle [for]="endTimePicker1" matPrefix></mat-datetimepicker-toggle>
                <mat-datetimepicker #endTimePicker1 type="time" openOnFocus="true"></mat-datetimepicker>
                <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker1">
              </mat-form-field>
            </div>
          </div>
          <div fxLayout="row" fxLayoutGap="8px" formGroupName="1" fxLayoutAlign="start center">
            <mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 1)">
              {{ 'device-profile.schedule-day.tuesday' | translate }}
            </mat-checkbox>
            <div fxLayout="row" fxLayoutGap="8px" fxFlex>
              <mat-form-field fxFlex="100px">
                <mat-label translate>device-profile.schedule-time-from</mat-label>
                <mat-datetimepicker-toggle [for]="startTimePicker2" matPrefix></mat-datetimepicker-toggle>
                <mat-datetimepicker #startTimePicker2 type="time" openOnFocus="true"></mat-datetimepicker>
                <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker2">
              </mat-form-field>
              <mat-form-field fxFlex="100px">
                <mat-label translate>device-profile.schedule-time-to</mat-label>
                <mat-datetimepicker-toggle [for]="endTimePicker2" matPrefix></mat-datetimepicker-toggle>
                <mat-datetimepicker #endTimePicker2 type="time" openOnFocus="true"></mat-datetimepicker>
                <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker2">
              </mat-form-field>
            </div>
          </div>
          <div fxLayout="row" fxLayoutGap="8px" formGroupName="2" fxLayoutAlign="start center">
            <mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 2)">
              {{ 'device-profile.schedule-day.wednesday' | translate }}
            </mat-checkbox>
            <div fxLayout="row" fxLayoutGap="8px" fxFlex>
              <mat-form-field fxFlex="100px">
                <mat-label translate>device-profile.schedule-time-from</mat-label>
                <mat-datetimepicker-toggle [for]="startTimePicker3" matPrefix></mat-datetimepicker-toggle>
                <mat-datetimepicker #startTimePicker3 type="time" openOnFocus="true"></mat-datetimepicker>
                <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker3">
              </mat-form-field>
              <mat-form-field fxFlex="100px">
                <mat-label translate>device-profile.schedule-time-to</mat-label>
                <mat-datetimepicker-toggle [for]="endTimePicker3" matPrefix></mat-datetimepicker-toggle>
                <mat-datetimepicker #endTimePicker3 type="time" openOnFocus="true"></mat-datetimepicker>
                <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker3">
              </mat-form-field>
            </div>
          </div>
          <div fxLayout="row" fxLayoutGap="8px" formGroupName="3" fxLayoutAlign="start center">
            <mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 3)">
              {{ 'device-profile.schedule-day.thursday' | translate }}
            </mat-checkbox>
            <div fxLayout="row" fxLayoutGap="8px" fxFlex>
              <mat-form-field fxFlex="100px">
                <mat-label translate>device-profile.schedule-time-from</mat-label>
                <mat-datetimepicker-toggle [for]="startTimePicker4" matPrefix></mat-datetimepicker-toggle>
                <mat-datetimepicker #startTimePicker4 type="time" openOnFocus="true"></mat-datetimepicker>
                <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker4">
              </mat-form-field>
              <mat-form-field fxFlex="100px">
                <mat-label translate>device-profile.schedule-time-to</mat-label>
                <mat-datetimepicker-toggle [for]="endTimePicker4" matPrefix></mat-datetimepicker-toggle>
                <mat-datetimepicker #endTimePicker4 type="time" openOnFocus="true"></mat-datetimepicker>
                <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker4">
              </mat-form-field>
            </div>
          </div>
        </div>
        <div fxLayout="column" fxFlex fxFlex.gt-sm="50">
          <div fxLayout="row" fxLayoutGap="8px" formGroupName="4" fxLayoutAlign="start center">
            <mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 4)">
              {{ 'device-profile.schedule-day.friday' | translate }}
            </mat-checkbox>
            <div fxLayout="row" fxLayoutGap="8px" fxFlex>
              <mat-form-field fxFlex="100px">
                <mat-label translate>device-profile.schedule-time-from</mat-label>
                <mat-datetimepicker-toggle [for]="startTimePicker5" matPrefix></mat-datetimepicker-toggle>
                <mat-datetimepicker #startTimePicker5 type="time" openOnFocus="true"></mat-datetimepicker>
                <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker5">
              </mat-form-field>
              <mat-form-field fxFlex="100px">
                <mat-label translate>device-profile.schedule-time-to</mat-label>
                <mat-datetimepicker-toggle [for]="endTimePicker5" matPrefix></mat-datetimepicker-toggle>
                <mat-datetimepicker #endTimePicker5 type="time" openOnFocus="true"></mat-datetimepicker>
                <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker5">
              </mat-form-field>
            </div>
          </div>
          <div fxLayout="row" fxLayoutGap="8px" formGroupName="5" fxLayoutAlign="start center">
            <mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 5)">
              {{ 'device-profile.schedule-day.saturday' | translate }}
            </mat-checkbox>
            <div fxLayout="row" fxLayoutGap="8px" fxFlex>
              <mat-form-field fxFlex="100px">
                <mat-label translate>device-profile.schedule-time-from</mat-label>
                <mat-datetimepicker-toggle [for]="startTimePicker6" matPrefix></mat-datetimepicker-toggle>
                <mat-datetimepicker #startTimePicker6 type="time" openOnFocus="true"></mat-datetimepicker>
                <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker6">
              </mat-form-field>
              <mat-form-field fxFlex="100px">
                <mat-label translate>device-profile.schedule-time-to</mat-label>
                <mat-datetimepicker-toggle [for]="endTimePicker6" matPrefix></mat-datetimepicker-toggle>
                <mat-datetimepicker #endTimePicker6 type="time" openOnFocus="true"></mat-datetimepicker>
                <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker6">
              </mat-form-field>
            </div>
          </div>
          <div fxLayout="row" fxLayoutGap="8px" formGroupName="6" fxLayoutAlign="start center">
            <mat-checkbox formControlName="enabled" fxFlex="40" (change)="changeCustomScheduler($event, 6)">
              {{ 'device-profile.schedule-day.sunday' | translate }}
            </mat-checkbox>
            <div fxLayout="row" fxLayoutGap="8px" fxFlex>
              <mat-form-field fxFlex="100px">
                <mat-label translate>device-profile.schedule-time-from</mat-label>
                <mat-datetimepicker-toggle [for]="startTimePicker7" matPrefix></mat-datetimepicker-toggle>
                <mat-datetimepicker #startTimePicker7 type="time" openOnFocus="true"></mat-datetimepicker>
                <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker7">
              </mat-form-field>
              <mat-form-field fxFlex="100px">
                <mat-label translate>device-profile.schedule-time-to</mat-label>
                <mat-datetimepicker-toggle [for]="endTimePicker7" matPrefix></mat-datetimepicker-toggle>
                <mat-datetimepicker #endTimePicker7 type="time" openOnFocus="true"></mat-datetimepicker>
                <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker7">
              </mat-form-field>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</section>
